// import React from 'react';
// import ReactDOM from 'react-dom';

import React from './lib/react';
import ReactDOM from './lib/react-dom';

/**
 * 
 *  useLayoutEffect 同步的
 * 1. 其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect
 * 2. useEffect不会阻塞浏览器渲染，而 useLayoutEffect 会浏览器渲染
 * 3. useEffect会在浏览器渲染结束后执行,useLayoutEffect 则是在 DOM 更新完成后,浏览器绘制之前执行
 * 
 */
const Animate = ()=>{
  const ref = React.useRef();
  // 使用 useLayoutEffect 不能能看到动画效果
  React.useLayoutEffect(()=>{
    ref.current.style.transform = 'translate(500px)';
    ref.current.style.transition  = 'all 1000ms';
  });
  // // 使用 useEffect 能看到动画移动过程
  // React.useEffect(()=>{
  //   ref.current.style.transform = 'translate(500px)';
  //   ref.current.style.transition  = 'all 1000ms';
  // });

  const style = {
    width:'150px',
    height:'100px',
    lineHeight: '100px',
    textAlign: 'center',
    backgroundColor:'red'
  }
  return (
    <div style={style} ref={ref}>useLayoutEffect</div>
  )
}

ReactDOM.render(
  <Animate />,
  document.getElementById('root')
);

// 注意如果要使用老的把 jsx 编译成 React.createElement(), 必须在启动项中设置 cross-env DISABLE_NEW_JSX_TRANSFORM=true
// 如： "start": "cross-env DISABLE_NEW_JSX_TRANSFORM=true react-scripts start",